<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item
      to=""
      v-for="(item, index) in activePathArr"
      :key="index"
      ><a href="Javascript:;" @click.stop="handleGoNav(item.path)">{{
        item.title
      }}</a></el-breadcrumb-item
    >
    <el-breadcrumb-item v-if="pageNum > 1"
      >第{{ pageNum }}页</el-breadcrumb-item
    >
    <el-breadcrumb-item></el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "BreadCrumb",
  data() {
    return {
      activePathArr: [],
    };
  },
  watch: {
    $route() {
      this.activePathArr = this.$cookies.get("activePathArr");
    },
  },
  computed: {
    ...mapState(["pageNum"]),
  },
  created() {
    this.activePathArr = this.$cookies.get("activePathArr");
  },
  methods: {
    async handleGoNav(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  padding: 20px 10px 0;
  font-size: 12px;
  .el-breadcrumb__item {
    /deep/.el-breadcrumb__inner {
      &:hover {
        color: #3361ea;
      }
      a {
        font-weight: initial;
      }
    }
    &:nth-last-child(2) {
      /deep/.el-breadcrumb__separator {
        display: none;
      }
    }
  }
}
</style>